import React, { Component,createRef } from 'react'

export default class App extends Component {
    ageRef = createRef();
    render() {
        return (
            <div>
                <h3>App</h3>
                {/* 用法一：ref='字符串'  获取通过 this.refs获取【已弃用不推荐】*/}
                <input type="text" name="username" id="" ref="usernameRef"/>

                {/* 用法二： ref={回调函数} 回调函数的参数就是 dom元素 */}
                <input type="text" name="sex" ref={(e)=>{
                    console.log(e);
                    // 还是要将dom元素 e 赋值给类的实例对象的一个属性，才可以在其他作用域中操作它
                    this.sexRef = e;
                }} />

                {/* 用法三： React.createRef 创建一个ref对象，并赋值给实例对象的私有属性
                获取： 私有属性.current */}
                <input type="text" name="age" ref={this.ageRef} defaultValue='123123'/>
                <button onClick={()=>{
                    // 
                    console.log(this.sexRef);
                    // this.refs.usernameRef
                    console.log(this.ageRef.current, this.ageRef.current.value);
                }}>获取dom元素</button>
            </div>
        )
    }
}
